<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设计器--转换</title>
    <link rel="stylesheet" type="text/css" href="../jquery/easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="../jquery/easyui/themes/icon.css"/>
    <link rel="stylesheet" type="text/css" href="css/icon.css"/>
    <link rel="stylesheet" type="text/css" href="css/designer.css"/>
    <script type="text/javascript" src="../jquery/jquery.js"></script>
    <script type="text/javascript" src="../jquery/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jquery/jsPlumb.js"></script>
    <script type="text/javascript" src="./designer.js"></script>

    <style>
        .step-draggable1 {
            width: 80px;
            height: 80px;
            margin-top: 150px;
            position: absolute;
            border: #ed4014 1px solid;
        }
    </style>
</head>
<body style="width: 97%;margin: 10px auto;">
<div class="designer-left">
    <div class="easyui-panel" data-options="title:'核心组件',width: 180,fit:true">
        <div class="easyui-accordion" data-options="border:false,fit:true">
            <div id="menuRead" title="输入">
                <div id="mm" class="designer-menu"
                     data-options="menuTitle:'json解析',stepType:'jsonparse',classify:'menuRead',iconCls:'designer-menu-jsonparse'"></div>
            </div>
            <div id="menuTrans" title="转换">
                <div class="designer-menu"
                     data-options="menuTitle:'字段选择',stepType:'choosecol',classify:'menuTrans'"></div>
                <div class="designer-menu"
                     data-options="menuTitle:'过滤记录',stepType:'datafilter',classify:'menuTrans'"></div>
            </div>
            <div id="menuWrite" title="输出">
                <div class="designer-menu"
                     data-options="menuTitle:'输出文本文件',stepType:'writetxt',classify:'menuWrite'"></div>
            </div>
        </div>
    </div>
</div>
<!---->
<script>
    $(function () {
        // 菜单 渲染
        $('.designer-menu').designermenu({});
        // 放置区
        $('#designerDesign').droppable({
            onDragEnter: function (e, source) {
                console.log(1)
            }, onDragOver: function (e, source) {
                console.log(2)

            }, onDragLeave: function (e, source) {
                console.log(3)

            }, onDrop: function (e, source) {
                console.log(4)

            },
        });
        $.designer.get('/design/steps.json', {designId: 'design001'}, function (res) {
            if (res.success) {
                let steps = res.result.steps;
                $.each(steps, (i, item) => {
                    let step = $('<div></div>').appendTo('#designerDesign').designerstep(item);
                });

                let lines = res.result.lines;
                $.each(lines, function (i, item) {
                    let common = $('#'+item.from).designerstep('options').jsPlumbCommon;
                    let param = {
                        source:item.from,
                        target:item.to
                    };
                    jsPlumb.connect(common,param);
                    console.log(jsPlumb.getEndpoint(item.from))
                })

            } else {
                $.messager.alert('系统错误', res.message || '系统发生错误!', 'warning')
            }
        });

    });

</script>
<!---->
<div class="designer-main">
    <div id="designerDesign" class="easyui-droppable" data-options="accept:'.step-draggable'"
         style="width: 100%; height: 100%">
    </div>

</div>
<script>

</script>
</body>

</html>
